<template lang="html">
  <li class="tab-item"
    :class="{ active: active }"
    @click="handleClick()"
  >
    <a href="#"><slot></slot></a>
    <div class="border"></div>
  </li>
</template>

<script>
export default {
  props: {
    active: { type: Boolean, default: false }
  },

  methods: {
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>

  li {
    list-style: none;
    height: 60px;
    padding: 20px 10px;
    margin-left: 30px;
    margin-right: 30px;
    cursor: pointer;
    position: relative;

    &:hover {
      .border {
        width: 100%;
        transition: width .3s
      }
    }

    a {
      display: block;
      width: 100%;
      height: 100%;
      color: #999;
      font-size: 18px;
      text-decoration: none;
      margin-bottom: 10px;
    }

    .border {
      width: 0;
      margin: 0 auto;
      text-align: center;
      height: 2px;
      transition: width .3s;
      background-color: #333;
    }

    &.active {
      color: #333;

      a {
        color: #333;
      }

      .border {
        width: 100%;
      }
    }
  }
</style>
